<template>
	<view class="main">
		<tou_hand1 :handtitle='name'></tou_hand1>
		<view class="show">
			<view class="oneleft">
				<van-collapse v-model="activeNames">
					<van-collapse-item :title=reason name="1" title-class="tclass1">
						<van-radio-group v-model="radio" @change="gobtn">
							<van-radio name="按充电区">按充电区</van-radio>
							<van-radio name="按设备号">按设备号</van-radio>
						</van-radio-group>
					</van-collapse-item>
				</van-collapse>
			</view>
			<view class="one">
				
				<view class="onez">
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//cdxselect.png"></image>
					<input :placeholder='pname' v-model="secondname" />
				</view>
				<view class="oneright" @click="selbtn">搜索</view>
			</view>
			<view class="two">
				<van-tabs v-model="active" @change="gbtn">
					<van-tab :title="aname" name="a">
						<view class="twomap">
							<view class="twomapfirst">
								<view class="twomapfleft">
									<span>总端口数：{{onehome}}</span>
									<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//y7.png" @click="tsbtn"></image>
								</view>
								
							</view>
							<checkbox-group @change="checkboxChange">
								<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
									<van-list v-model="loading" :offset="300" :finished="finished" finished-text="没有更多了"
										@load="loadMore">
										<van-cell v-for="(item, index) in alist" :key="index">
												<view class="twomapsecond">
													<view class="twomapsleft">
														<checkbox :value="item.deviceId" :checked="item.checked" />
													</view>
													<view class="twomapsright">
														<view class="twomapsrightshang">
															<view class="twomapsrightshangl">{{item.code}}</view>
															<view class="twomapsrightshangr">¥{{item.money}}</view>
														</view>
														<view class="twomapsrightzhong">
															端口数量：{{item.portsNum}}
														</view>
														<view class="twomapsrightzhong">
															设备位置：{{item.projectName}}-{{item.areaName}}
														</view>
													</view>
													<view class="twomapshand">未购买</view>
												</view>
										</van-cell>
									</van-list>
								</van-pull-refresh>
								</checkbox-group>
							<view class="twomapthird" v-show="alist.length>0">
								<view class="twomaptshang" v-show="amap.zong">
									已选中{{amap.zong}}台设备，{{amap.num}}个端口
								</view>
								<view class="twomaptxia">
									<view class="twomaptxiaone">
										<checkbox-group @change="changeBook">
											<checkbox :checked="checked" />
										</checkbox-group>
										<view class="twomaptxiaonetxt">全选</view>
										<view  class="twomaptxiaonetxt" style="margin-left: 35upx;">购买期限:1年</view>
									</view>
									<view class="twomaptxiatwo">
										<!-- <van-stepper v-model="value" min="1" max="3" disable-input
											@change="jiabtn('a')" button-size="44upx" input-width="44upx"/> 年 -->
										<span style="margin-left: 15upx;display: flex;align-items: center;">
											合计：
											<span style="color:#E92600;font-size: 32upx;">¥{{(amap.summoney).toFixed(2)}}</span>
										</span>
										<view class="twomaptxiathree" @click="buybtn(1)">结算</view>
									</view>
								</view>
							</view>
						</view>
					</van-tab>
					<van-tab :title="bname" name="b">
						<view class="twomap">
							<view class="twomapfirst">
								<view class="twomapfleft">
									<span>总端口数：{{twohome}}</span>
									<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//y7.png" @click="tsbtn"></image>
								</view>
								
							</view>
							<view class="twoleft">
								<van-collapse v-model="activeNames1">
									<van-collapse-item :title=reason1 name="1" title-class="tclass1">
										<van-radio-group v-model="radio1" @change="gobtn1">
											<van-radio name="临到期">全部</van-radio>
											<van-radio name="30天">30天</van-radio>
											<van-radio name="60天">60天</van-radio>
											<van-radio name="90天">90天</van-radio>
										</van-radio-group>
									</van-collapse-item>
								</van-collapse>
							</view>
								<van-pull-refresh v-model="brefreshing" @refresh="bonRefresh">
									<van-list v-model="bloading" :offset="300" :finished="bfinished"
										finished-text="没有更多了" @load="bloadMore">
										<van-cell v-for="(item, index) in blist" :key="index">
											<view class="twomapsecond">
												
												<view class="twomapsright">
													<view class="twomapsrightshang" style="margin-top: 0upx;">
														<view class="twomapsrightshangl">{{item.code}}</view>
														<!-- <view class="twomapsrightshangr">¥{{item.money}}</view> -->
													</view>
													<view class="twomapsrightzhong">
														端口数量：{{item.portsNum}}
													</view>
													<view class="twomapsrightzhong">
														保单号：<span style="color: #4B98ED;"
															v-if="item.insureOrder">{{item.insureOrder}}</span>
														<span style="color: #4B98ED;" v-else>生成中</span>
													</view>
													<view class="twomapsrightzhong">
														保单开始时间：<span v-if="item.insureStartTime">{{item.insureStartTime}}</span>
														<span v-else>-</span>
													</view>
													<view class="twomapsrightzhong">
														保单结束时间：
														<span v-if="item.insureEndTime">{{item.insureEndTime}}</span>
														<span v-else>-</span>
													</view>
													<view class="twomapsrightzhong">
														设备位置：{{item.projectName}}-{{item.areaName}}
													</view>
												</view>
											</view>
										</van-cell>
									</van-list>
								</van-pull-refresh>
							
						</view>
					</van-tab>
				</van-tabs>
			</view>
		</view>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	// import {
	// 	Dialog
	// } from 'vant';
	export default {
		components: {
			tou_hand1
		},
		mounted() {

		},

		data() {
			return {
				name: '',
				projectId: '',
				onehome: '',
				twohome: '',
				activeNames: ['按充电区'],
				radio: '按充电区',
				reason: '按充电区',
				secondname: '',
				active: 'a',
				aname: '未投保（100）',
				bname: '投保中（20）',
				result: [],
				checked: false,
				value: 1,
				resultb: [],
				activeNames1: ['临到期'],
				radio1: '临到期',
				reason1: '临到期',
				alist: [], //未投保数据
				loading: false,
				finished: false,
				refreshing: false,
				pageNum: 1, //页码
				pageSize: 10, //未投保每页显示的条数
				blist: [], //未投保数据
				bloading: false,
				bfinished: false,
				brefreshing: false,
				bpageNum: 1, //页码
				bpageSize: 10, //未投保每页显示的条数
				pname:'充电区搜索',
				amap: {
					summoney: 0
				},
			}
		},
		onLoad(option) {
			this.name = option.name
			this.projectId = option.projectId
		},
		onShow() {
			this.loadMore()
		},
		methods: {
			gobtn() {
				this.reason = this.radio
				this.activeNames = ['']
				if(this.radio=='按充电区'){
					this.pname='充电区搜索'
				}else if(this.radio=='按设备号'){
					this.pname='设备号搜索'
				}
			},
			gobtn1() {
				this.reason1 = this.radio1
				this.activeNames1 = ['']
				this.blist=[]
				this.bonRefresh()
			},
			gbtn(vul) {
				if (vul == 'b') {
					this.blist = []
					this.bonRefresh()
				}else if (vul == 'a'){
					this.alist = []
					this.onRefresh()
				}
			},


			tsbtn() {
				Dialog.alert({
					title: '提示',
					message: '未投保、投保中的统计数据存在延迟，数据将会在两小时后刷新。',
				}).then(() => {
					// on close
				})
			},
			buybtn(type) {
				if(type==1){
					let deviceIds=[]
					for(var i=0;i<this.alist.length;i++){
						if(this.alist[i].checked==true){
							deviceIds.push(this.alist[i].deviceId)
						}
					}
					if(deviceIds.length==0){
						this.$toast.fail('请选择设备')
						return
					}
					let data={
						deviceIds:deviceIds,
						expireData:this.value,
						type:0
					}
					var header={
						'content-type': 'application/json'
					}
					uni.showLoading({
						title: '请稍候',
						mask: true
					})
					this.$base.request1('manager/site/order/confirmSiteOrder', 'POST', data,header)
						.then(res => {
							uni.hideLoading()
							if(res.data.code==200){
								uni.navigateTo({
									url: '/pages/site_insurance_order/site_insurance_order?type=' + type+'&orderNo='+res.data.data.orderNo
								})
							}else{
								this.$toast.fail(res.data.msg)
							}
						})
						.catch(err => {
							uni.hideLoading()
						})
				}
				
			},
			
			// 用户统计详情分页
			loadMore() {
				if (this.refreshing) {
					this.alist = [];
					this.refreshing = false;
				}
				const that = this;
				let data = {}
				if (that.radio == '按充电区') {
					data = {

						currentPage: that.pageNum,
						pageSize: that.pageSize,
						areaName: that.secondname,
						projectId: that.projectId
					}
				} else if (that.radio == '按设备号') {
					data = {

						currentPage: that.pageNum,
						pageSize: that.pageSize,
						deviceCode: that.secondname,
						projectId: that.projectId
					}
				}

				that.loading = true;
				that.$base.request1('manager/insure/getUnInsureDeviceByProjectId', 'GET', data)
					.then(res => {
						that.loading = false;
						if (res.data.code == 200) {
							that.aname = '未投保（' + res.data.data.unInsureDeviceCount + '）'
							that.bname = '投保中（' + res.data.data.insureDeviceCount + '）'
							that.onehome = res.data.data.portCount
							if (res.data.data.data && res.data.data.data.length > 0) {
								that.alist = that.alist.concat(res.data.data.data);
								that.pageNum += 1;
							} else {
								that.finished = true;
							}
						} else {
							that.finished = true;
						}

					})
					.catch(err => {

					})
			},
			onRefresh() {
				this.checked = false
				this.amap = {
					summoney: 0
				}
				this.value=1
				// 清空列表数据
				this.finished = false;
				this.pageNum = 1
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.loadMore();
				
			},
			// 用户统计详情分页
			bloadMore() {
				if (this.brefreshing) {
					this.blist = [];
					this.brefreshing = false;
				}
				const that = this;
				let data = {}
				let endDate = ''
				if (this.radio1 == '30天') {
					endDate = 30
				} else if (this.radio1 == '60天') {
					endDate = 60
				} else if (this.radio1 == '90天') {
					endDate = 90
				}else{
					endDate=''
				}
				if (that.radio == '按充电区') {
					data = {
						endDate: endDate,
						currentPage: that.bpageNum,
						pageSize: that.bpageSize,
						areaName: that.secondname,
						projectId: that.projectId
					}
				} else if (that.radio == '按设备号') {
					data = {
						endDate: endDate,
						currentPage: that.bpageNum,
						pageSize: that.bpageSize,
						deviceCode: that.secondname,
						projectId: that.projectId
					}
				}

				that.bloading = true;
				that.$base.request1('manager/insure/getInsureDeviceByProjectId', 'GET', data)
					.then(res => {
						that.bloading = false;
						if (res.data.code == 200) {
							that.aname = '未投保（' + res.data.data.unInsureDeviceCount + '）'
							that.bname = '投保中（' + res.data.data.insureDeviceCount + '）'
							that.twohome = res.data.data.portCount
							if (res.data.data.data && res.data.data.data.length > 0) {
								that.blist = that.blist.concat(res.data.data.data);
								that.bpageNum += 1;
							} else {
								that.bfinished = true;
							}
						} else {
							that.bfinished = true;
						}

					})
					.catch(err => {

					})
			},
			bonRefresh() {
				// 清空列表数据
				this.bfinished = false;
				this.bpageNum = 1
				// 重新加载数据
				// 将 bloading 设置为 true，表示处于加载状态
				this.bloading = true;
				this.bloadMore();
				
			},
			changeBook(e) {
				console.log(e.detail,'88')
				if (e.detail.value.length == 0) {
					this.alist.forEach((item) => {
						this.$set(item, "checked", false);
					});
					this.checked = false;
				} else {
					this.alist.forEach((item) => {
						this.$set(item, "checked", true);
					});
					this.checked = true;
				}
				console.log(this.alist,'8888')
				let firstarr = []
				for(var i=0;i<this.alist.length;i++){
					if(this.alist[i].checked==true){
						firstarr.push(this.alist[i])
					}
				}
				if (firstarr.length != 0) {
					this.amap = {}
					this.amap.num = firstarr.reduce((p, e) => p + e.portsNum, 0);
					this.amap.money = firstarr.reduce((p, e) => p + e.money, 0);
					this.amap.deviceId = firstarr.map(item => item.deviceId);
					this.amap.zong = this.amap.deviceId.length
					this.amap.summoney = this.amap.money * this.value
				} else {
					this.amap = {
						summoney: 0
					}
				}
			},
			checkboxChange(e) {
				console.log(e.detail,'777')
				if (e.detail.value.length == this.alist.length) {
					this.checked = true;
				} else {
					this.checked = false;
				}
				this.alist.forEach((item) => {
					if (e.detail.value.indexOf(item.deviceId) != -1) {
						this.$set(item, "checked", true);
					} else {
						this.$set(item, "checked", false);
					}
				})
				console.log(this.alist,'7777')
				let firstarr = []
				for(var i=0;i<this.alist.length;i++){
					if(this.alist[i].checked==true){
						firstarr.push(this.alist[i])
					}
				}
				if (firstarr.length != 0) {
					this.amap = {}
					this.amap.num = firstarr.reduce((p, e) => p + e.portsNum, 0);
					this.amap.money = firstarr.reduce((p, e) => p + e.money, 0);
					this.amap.deviceId = firstarr.map(item => item.deviceId);
					this.amap.zong = this.amap.deviceId.length
					this.amap.summoney = this.amap.money * this.value
				} else {
					this.amap = {
						summoney: 0
					}
				}
			},
			
			jiabtn(vul) {
				if (vul == 'a') {
					if(this.amap.money){
						this.amap.summoney = this.amap.money * this.value
					}else{
						this.amap.summoney = 0 * this.value
					}
				} 
			},
			selbtn() {
				if (this.active == 'a') {
					this.alist = []
					this.onRefresh()
				} else if (this.active == 'b') {
					this.blist = []
					this.bonRefresh()
				}
			}

		}
	}
</script>
<style>
	
	page{
		 background-color: #EAE9E9 !important;
	}
</style>
<style lang="scss" scoped>
	.main {
		width: 100%;
		/deep/.van-list__finished-text {
			margin-top: 100upx;
			padding-bottom: 200upx;
		}

		/deep/.van-hairline--top-bottom::after {
			border-width: 0;
		}
		.show {
			width: 100%;
			position: relative;
			.oneleft {
				width: 210upx;
				box-sizing: border-box;
				background-color: #4B98ED;
				border-radius: 24upx;
				position: absolute;
				left: 15upx;
				top: 22upx;
				z-index: 1;
			
				/deep/.van-collapse-item {
					background-color: #4B98ED;
					border-radius: 24upx;
				}
			
				/deep/.tclass1 {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 700;
					color: #fff;
				}
			
				/deep/.van-cell {
					box-sizing: border-box;
					background: #4B98ED;
					border-radius: 24upx;
					padding: 10upx 20upx;
				}
			
				/deep/.van-radio__label {
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			
				/deep/.van-cell__right-icon {
					color: #fff;
				}
			
				/deep/.van-radio__icon {
					/deep/.van-icon {
						width: 20upx;
						height: 20upx;
						border: 1upx solid #cccccc;
					}
			
				}
			
				/deep/.van-collapse-item__content {
					background-color: #4B98ED;
					border-radius: 24upx;
					padding: 10upx 20upx;
				}
			
				/deep/.van-hairline--top-bottom::after {
					border-width: 0upx;
				}
			
				/deep/.van-radio {
					// margin-bottom: 15upx;
					height: 70upx;
					align-items: center;
				}
			
				/deep/.van-collapse-item__wrapper {
					margin-bottom: 10upx;
			
				}
			
				/deep/.van-cell:not(:last-child)::after {
					border-bottom: 0upx;
				}
			
				/deep/.van-radio__icon--checked .van-icon {
					background-color: #EC651C;
					border-color: #EC651C;
				}
			}
			.one {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 22upx 15upx;
				padding-left: 200upx;
				background-color: #fff;
				

				.onez {
					width: 80%;
					box-sizing: border-box;
					text-align: center;
					display: flex;
					border-radius: 44upx;
					padding: 15upx 20upx;
					background-color: #F5F5F5;
					align-items: center;
					margin-left: 36upx;

					image {
						width: 34upx;
						height: 34upx;
					}

					input {
						width: 100%;
					}

					/deep/.uni-input-placeholder {
						font-size: 30upx;
						font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
						font-weight: normal;
						color: #CECECE;
						line-height: 36upx;
					}
					
				}

				.oneright {
					font-size: 30upx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #4B98ED;
					line-height: 36upx;
				}
			}

			.two {
				/deep/.van-tab {
					font-size: 28upx;
					font-family: PingFang-SC-Bold-, PingFang-SC-Bold;
					font-weight: normal;
					color: #999999;
				}

				/deep/.van-tab--active {
					font-size: 28upx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #4B98ED;
				}

				.twomap {
					width: 100%;
					position: relative;
					padding: 0 18upx;
					box-sizing: border-box;

					/deep/.van-cell {
						padding: 0upx;
						margin-bottom: 20upx;
						border-radius: 10upx;
						width: 99%;
						margin: 0 auto;
						margin-bottom: 25upx;
					}
					.twoleft {
						width: 210upx;
						box-sizing: border-box;
						background-color: #4B98ED;
						border-radius: 24upx;
						margin-bottom: 25upx;
						position: absolute;
						z-index: 1;
						top: 4upx;
						right:18upx;
						/deep/.van-collapse-item {
							background-color: #4B98ED;
							border-radius: 24upx;
						}
					
						/deep/.tclass1 {
							font-size: 24upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 700;
							color: #fff;
						}
					
						/deep/.van-cell {
							box-sizing: border-box;
							background: #4B98ED;
							border-radius: 24upx;
							padding: 10upx 20upx;
							margin-bottom: 0upx;
						}
					
						/deep/.van-radio__label {
							font-size: 24upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}
					
						/deep/.van-cell__right-icon {
							color: #fff;
						}
					
						/deep/.van-radio__icon {
							/deep/.van-icon {
								width: 20upx;
								height: 20upx;
								border: 1upx solid #cccccc;
							}
					
						}
					
						/deep/.van-collapse-item__content {
							background-color: #4B98ED;
							border-radius: 24upx;
							padding: 10upx 20upx;
						}
					
						/deep/.van-hairline--top-bottom::after {
							border-width: 0upx;
						}
					
						/deep/.van-radio {
							// margin-bottom: 15upx;
							height: 70upx;
							align-items: center;
						}
					
						/deep/.van-collapse-item__wrapper {
							margin-bottom: 10upx;
					
						}
					
						/deep/.van-cell:not(:last-child)::after {
							border-bottom: 0upx;
						}
					
						/deep/.van-radio__icon--checked .van-icon {
							background-color: #EC651C;
							border-color: #EC651C;
						}
					}
					.twomapfirst {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						box-sizing: border-box;
						padding: 22upx 29upx;

						.twomapfleft {
							display: flex;
							align-items: center;
							font-size: 28upx;
							font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
							font-weight: normal;
							color: #000000;
							line-height: 34upx;

							image {
								width: 26upx;
								height: 26upx;
								margin-left: 23upx;
							}
						}

						.twomapfright {
							display: flex;
							align-items: center;
							font-size: 28upx;
							font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
							font-weight: normal;
							color: #E77D00;
							line-height: 34upx;

							image {
								width: 14upx;
								height: 24upx;
								margin-left: 16upx;
							}
						}

					}

					.twomapsecond {
						width: 100%;
						display: flex;
						box-sizing: border-box;
						background-color: #fff;
						align-items: center;
						padding: 26upx;
						position: relative;

						.twomapsleft{
							/deep/.uni-checkbox-input{
								border-radius: 20upx;
								width: 34upx;
								height: 34upx;
								border-color: #d1d1d1 !important;
							}
							/deep/.uni-checkbox-input-checked:before{
								font-size: 34upx;
								border-color: #007aff !important;
							}
						}
						.twomapsright {
							width: 100%;
							margin-left: 20upx;

							.twomapsrightshang {
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin: 20upx 0;
								margin-top: 40upx;

								.twomapsrightshangl {
									font-size: 32upx;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: #4B98ED;
									line-height: 38upx;
								}

								.twomapsrightshangr {
									font-size: 30upx;
									font-family: PingFang SC-Bold, PingFang SC;
									font-weight: bold;
									color: #D90303;
									line-height: 36upx;
								}
							}

							.twomapsrightzhong {
								font-size: 26upx;
								font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
								font-weight: normal;
								color: #666666;
								line-height: 31upx;
								margin-top: 15upx;
							}
						}
						

						.twomapshand {
							position: absolute;
							right: 0upx;
							top: 0upx;
							background-color: #F2403D;
							border-radius: 10upx 0upx 10upx 0upx;
							font-size: 24upx;
							color: #fff;
							padding: 5upx 15upx;
							line-height: 30upx;
						}
					}

					.twomapthird {
						width: 100%;
						position: fixed;
						bottom: 0upx;
						left: 0upx;

						.twomaptshang {
							width: 100%;
							background-color: #EFE2B3;
							font-size: 28upx;
							font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
							font-weight: normal;
							color: #F67004;
							line-height: 34upx;
							box-sizing: border-box;
							padding: 14upx 37upx;
						}

						.twomaptxia {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 33upx 29upx;
							background-color: #fff;
							box-sizing: border-box;

							.twomaptxiaone {
								display: flex;
								align-items: center;
								/deep/.uni-checkbox-input{
									width: 34upx;
									height: 34upx;
									border-radius: 20upx;
									border-color: #d1d1d1 !important;
								}
								/deep/.uni-checkbox-input-checked:before{
									font-size: 34upx;
									border-color: #007aff !important;
								}
								.twomaptxiaonetxt {
									font-size: 28upx;
									font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
									font-weight: normal;
									color: #010101;
									line-height: 34upx;
									margin-left: 10upx;
								}
								/deep/.uni-checkbox-input{
									margin-right: 0upx;
								}
							}

							.twomaptxiatwo {
								display: flex;
								align-items: center;
								font-size: 20upx;
								font-family: PingFang-SC-Regular-, PingFang-SC-Regular;
								font-weight: normal;
								color: #010101;
								line-height: 34upx;

								/deep/.van-stepper {
									margin: 0 15upx;
								}
							}

							.twomaptxiathree {
								width: 112upx;
								background: #0083FF;
								border-radius: 10upx;
								text-align: center;
								font-size: 24upx;
								font-family: Yu Gothic UI-Regular, Yu Gothic UI;
								font-weight: 400;
								color: #FFFFFF;
								padding: 10upx 0;
								margin-left: 20upx;
							}
						}
					}

					
				}
			}
		}

	}
</style>